<template>
  <el-row class="condition-box">
    <el-col :span="8">
      <el-select size="mini" v-model="data.identifier" @change="typeChanged">
        <el-option-group v-for="group in types" :key="group.name" :label="group.name">
          <el-option v-for="pro in group.items" :label="pro.name" :value="pro.identifier" :key="pro.identifier"></el-option>
        </el-option-group>
      </el-select>
    </el-col>
    <el-col :span="14" v-if="!data.identifier.endsWith(':*')">
      <el-row v-for="param in data.parameters" :key="param.identifier">
        <el-col :span="11">
          <el-select size="mini" v-if="data.identifier=='post'" v-model="param.identifier">
            <el-option v-for="p in properties" :label="p.name" :value="p.identifier" :key="p.identifier"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select size="mini" v-model="param.comparator">
            <el-option v-for="cp in comparators" :label="cp.name" :value="cp.value" :key="cp.value"></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-input size="mini" v-model="param.value" auto-complete="off"></el-input>
        </el-col>
        <el-col :span="3">
          <el-button size="mini" @click="delParmeter(param)">-</el-button>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="2" v-if="!data.identifier.endsWith(':*')" style="padding-left:3px">
      <el-button size="mini" @click="addParmeter">+</el-button>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    name: 'ListenerCondition',
    props: {
     data:{
      type: Object,
      default: () => {
        return {
          type: 'event',
          identifier: '',
          parameters:[
            {}
          ]
        }
      }
     },
     types:{
      type: Array,
      default: () => {
        return []
      }
     },
     properties:{
      type: Array,
      default: () => {
        return []
      }
     },
     events:{
      type: Array,
      default: () => {
        return []
      }
     },
     services:{
      type: Array,
      default: () => {
        return []
      }
     }
    },
    data() {
      return {
        inEdit: false,
        comparators: [{
          name: '大于',
          value: '>'
        },{
          name: '等于',
          value: '=='
        },{
          name: '小于',
          value: '<'
        },{
          name: '不等于',
          value: '!='
        },{
          name: '包含',
          value: 'in'
        },{
          name: '不包含',
          value: 'notin'
        },{
          name: '相似',
          value: 'like'
        },{
          name: '任意',
          value: '*'
        }]
      }
    },
    // 注册组件
    components: {
    },
    created() {
    },
    methods: {
      typeChanged(){
        this.types.forEach(t=>{
          t.items.forEach(item=>{
            if(item.identifier==this.data.identifier){
               this.data.type=item.type;
               return;
            }
          })
        })
      },
      addParmeter(){
        this.data.parameters.push({});
      },
      delParmeter(param){
        let idx= this.data.parameters.findIndex(p=>p.identifier==param.identifier);
        this.data.parameters.splice(idx,1);
      }
    }
  }
</script>

<style scoped>
.condition-box{
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 5px 0;
  background-color: #EEE;
}
</style>
